<template>
  <div>
    <div class="concent">
      <div id="cartTable">
        <div style="margin-top: 20px;border: 1px dashed #c8ced2;">
          <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              stripe
              :header-cell-style="{'color':'black','text-align':'center'}"
              @selection-change="handleSelectionChange"
          >
            <el-table-column
                type="selection"
                width="55"
                align="center">
            </el-table-column>
            <el-table-column
                label="商品信息"
                width="250"
                align="center">
              <template slot-scope="scope">
                <router-link :to="'/detail?pid='+scope.row.productId">
                  <div class="item-pic" style="float:left;">
                    <a href="#" target="_blank" data-title="美康粉黛醉美东方唇膏口红正品 持久保湿滋润防水不掉色护唇彩妆"
                       class="J_MakePoint" data-point="tbcart.8.12">
                      <img :src="scope.row.productImg" class="itempic J_ItemImg" style="width: 80px;height:80px"></a>
                  </div>
                  <div class="item-info">
                    <div class="item-basic-info">
                      <a href="#" target="_blank" title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色"
                         class="item-title J_MakePoint" data-point="tbcart.8.11">
                        {{ scope.row.productName }}
                      </a>
                    </div>
                  </div>
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
                label="规格"
                width="250"
                align="center">
              <template slot-scope="scope">
                <div class="item-props item-props-can">
                  <div class="sku-line" style="line-height: 90px">{{ scope.row.skuProps }}</div>
                  <span tabindex="0" class="btn-edit-sku theme-login">修改</span>
                  <i class="theme-login am-icon-sort-desc"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="单价"
                width="100"
                align="center">
              <template slot-scope="scope">
                <div class="td-price">
                  <div class="item-price price-promo-promo">
                    <div class="price-content">
                      <div class="price-line">
                        <em class="price-original"
                            style="text-decoration: line-through;color: darkgray">￥{{ scope.row.originalPrice }}</em>
                      </div>
                      <div class="price-line">
                        <em class="J_Price price-now" tabindex="0">￥{{ scope.row.sellPrice }}</em>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="数量"
                width="130"
                align="center">
              <template slot-scope="scope">
                <div class="amount-wrapper ">
                  <div class="item-amount ">
                    <div class="sl">
                      <input class="min am-btn" name="" type="button" value="-" @click="changeNum(scope,'-')"/>
                      <input class="text_box" name="" type="text" :value="scope.row.cartNum"
                             style="width:30px;text-align: center"/>
                      <input class="add am-btn" name="" type="button" value="+" @click="changeNum(scope,'+')"/>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="金额"
                width="100"
                align="center">
              <template slot-scope="scope">
                <div class="td-inner">
                  <em tabindex="0" class="J_ItemSum number">￥{{ scope.row.sellPrice * scope.row.cartNum }}</em>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
              <template slot-scope="scope">
                <div class="td-inner">
                  <!--<a style="display:block">移入收藏夹</a>-->
                  <a style="display:block;" @click="deleteCart(scope,1)">删除</a>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="clear"></div>

      <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll" style="margin-left: 10px;">
          <a @click="toggleSelection(tableData)"><span>全选</span></a>
        </div>
        <div class="operations">
          <a @click="deleteCart(multipleSelection,2)">删除</a>
          <a>移入收藏夹</a>
        </div>
        <div class="float-bar-right">
          <div class="amount-sum">
            <span class="txt">已选商品</span>
            <em id="J_SelectedItemsCount">{{ multipleSelection.length }}</em><span class="txt">件</span>
            <div class="arrow-box">
              <span class="selected-items-arrow"></span>
              <span class="arrow"></span>
            </div>
          </div>
          <div class="price-sum">
            <span class="txt">合计:</span>
            <strong class="price">¥<em id="J_Total">{{ totalPrice }}</em></strong>
          </div>
          <div class="btn-area" @click="goToOrder">
            <a id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
              <span>结&nbsp;算</span>
            </a>
          </div>

        </div>

      </div>

      <div class="footer">
        <div class="footer-hd">
          <p>
            <a href="#">恒望科技</a>
            <b>|</b>
            <a href="#">商城首页</a>
            <b>|</b>
            <a href="#">支付宝</a>
            <b>|</b>
            <a href="#">物流</a>
          </p>
        </div>
        <div class="footer-bd">
          <p>
            <a href="#">关于恒望</a>
            <a href="#">合作伙伴</a>
            <a href="#">联系我们</a>
            <a href="#">网站地图</a>
            <em>© 2015-2025 Hengwang.com 版权所有</em>
          </p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {getShopCarts, updateShopCartNum, deleteShopCart} from "@/api/cart.js";

export default {
  name: "CartMain",
  data() {
    return {
      multipleSelection: [],
      total: 0,
      totalPrice: 0,
      totalSum: "0",
      tableData: []
    }
  },
  created() {
    this.getShopCarts();
  },
  methods: {

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    deleteCart(scope, flag) {
      const selecitonList = [];
      if (flag == 1) {
        const cartId = scope.row.cartId;

        selecitonList.push(cartId);
      } else {
        scope.forEach((item) => {
          selecitonList.push(item.cartId)
        })
      }
      if (selecitonList.length == 0) {
        this.$message({
          message: "请选择要删除的商品",
          type: 'warning'
        });
        return;
      }
      //console.log(selecitonList)

      deleteShopCart(selecitonList).then(data => {
        const res = data.data;
        if (res.success) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getShopCarts();
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val == null) {
        this.totalPrice = 0;
      } else {
        this.totalPrice = 0;
        val.forEach((item) => {
          this.totalPrice += item.sellPrice * item.cartNum;
        })
      }
    },
    changeNum(scope, option) {

      if (option == '+') {
        scope.row.cartNum++;
      } else if (scope.row.cartNum > 1 && option == '-') {
        scope.row.cartNum--;
      }
      const cartNum = scope.row.cartNum;
      const cartId = scope.row.cartId;
      updateShopCartNum(cartId, cartNum).then(data => {
        const res = data.data;
        this.totalPrice = 0;
        this.multipleSelection.forEach((item) => {
          this.totalPrice += item.sellPrice * item.cartNum;
        })
        if (!res.success) {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })

    },
    getShopCarts() {
      if (this.$store.state.id) {
        getShopCarts(this.$store.state.id).then(data => {
          const res = data.data;
          //console.log(JSON.stringify(res))
          this.tableData = res.data;
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
        });
      }
    },
    goToOrder() {
      const selecitonList = [];
        this.multipleSelection.forEach((item) => {
          selecitonList.push(item.cartId)
        })
      if (this.multipleSelection.length==0){
        this.$message({
          message: "请选择商品",
          type: 'warning'
        });
        return;
      }
      this.$router.push({
        path: "/order",
        query: {cartIds:selecitonList}
      });
    }
  }
}
</script>

<style scoped>
.item {
  display: flex;
}

.item .item-pic {
  width: 60px;
  height: 60px;
}

.item .item-title {
  padding-left: 8px;
  width: 180px;
}

.settle-panel {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1000;
}

.settle-panel .checkall-btn {
  position: absolute;
  top: 8px;
}

.settle-panel .del-all {
  position: absolute;
  left: 70px;
  top: 10px;
}

.settle-panel .settle-btn {
  position: absolute;
  top: -5px;
  right: 100px;
}

.all-goods {
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

.frame {
  border: 1px solid #e6e6e6;
  width: 1190px;
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 30px;
}

.price {
  color: red;
  font-size: 18px;
  font-weight: 600;
}

a:hover {
  color: blue;
}
</style>